<template>
   <main-layout class="fix-black">
     <breadcrumb title="服务账号.列表"></breadcrumb>
     <div class="top-list">
      <nsSelect @input="(e)=>{changeNs(e)}" url="sa-create" btn="创建ServiceAccount"></nsSelect>
      <el-divider></el-divider>
       <el-table
              :data="state.List"
              border
              empty-text="暂无数据"
              style="width: 100%">

       <el-table-column label="服务账号名称" >
         <template #default="scope">
           <p  @click="()=>doTo('sa-detail',rowToQuery(scope.row))"  >
             {{ scope.row.metadata.name }}
             <a style="margin-left:25px" v-for="item in scope.row.secrets" @click.stop="showToken(item.name)">
               查看{{item.name}}
             </a>
           </p>
         </template>
       </el-table-column>
       <el-table-column label="命名空间" width="180" align="center">
         <template #default="scope">
           <span>{{ scope.row.metadata.namespace }}</span>
         </template>
       </el-table-column>
       <el-table-column label="创建时间" width="200" align="center">
         <template #default="scope">
           <span>{{ scope.row.metadata.creationTimestamp }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" width="300" align="center">
         <template #default="scope">
           <el-button
               type="primary"
               size="small"
               @click="()=>doTo('sa-update',rowToQuery(scope.row))"  >
             编辑
           </el-button>
             <el-button
                 type="info"
                 size="small"
                 @click="()=>doTo('sa-detail',rowToQuery(scope.row))"  >
               查看详情
             </el-button>
             <el-button type="danger" size="small" @click="()=>rm(scope.row.namespace,scope.row.name )" >删除</el-button>
         </template>
       </el-table-column>
    </el-table>
       <div class="page_show">
         <el-pagination
             @current-change="pageChange"
             background
             :current-page="state.currentPage"
             :page-size="10"
             :hide-on-single-page="true"
             layout="prev, pager, next"
             :total="state.pageTotal">
         </el-pagination>
       </div>
     </div>
   </main-layout>

  <el-dialog
      v-model="state.dialogVisible"
      v-if="state.dialogVisible"
      title="token"
  >
    <div  class="break">{{state.token}}</div>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.dialogVisible = false">关闭</el-button>
        </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {defineComponent, inject, reactive, ref, toRefs} from 'vue'
import MainLayout from "@/layout/main.vue";
import {doTo} from "../../router";
import {getSaList, SaDel} from "../../api/token/sa/sa";
import {secretDetail} from "../../api/token/secret/secret";
import nsSelect from "@/components/common/nsSelect.vue";
import breadcrumb from "@/components/common/breadcrumb.vue";
import {rowToQuery,copyData,wsCopyData,rmTip,showError} from "../../helper/helper";
import {ElMessage} from "element-plus";

const ws: WebSocket = inject("ws")
let state=reactive({
  namespace:"default",
  dialogVisible:false,
  token:'',
  List: [],
  pageTotal:0,
  currentPage:1,
})

async function changeNs(ns){
  state.namespace=ns
  try {
    let tData=await getSaList(state.namespace,state.currentPage)
    copyData(state,tData)
  }catch (e){
    console.log(e)
  }
}
changeNs(state.namespace)
ws.onmessage = (e)=>{
  if(e.data !== 'ping'){
    let tData=JSON.parse(e.data)
    wsCopyData(state,tData,"sa")
  }
}

function rm(ns,name){
  rmTip('ServiceAccount')
      .then(async () => {
        try {
          await SaDel(ns,name)
        }catch (e) {
          console.log(e)
        }
      })
}
async function showToken(name){
  try {
    let result=await secretDetail(state.namespace,name)
    let token=window.atob(result.data.data.Secret.data['token'])
    state.token=token;
    state.dialogVisible=true;
  }catch (e) {
    console.log(e)
    ElMessage.error("该数据没有合法token")
  }

}
function pageChange(page){
  state.currentPage=page
  changeNs(state.namespace)
}

</script>
